<!--
 * @Author: NaturalHulk 2066634567@qq.com
 * @Date: 2024-10-09 11:55:37
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2025-03-13 15:38:23
 * @FilePath: /xhs-mom-new/src/views/supplierLabel/outsourcPrint/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
/**
 * 接口
 */
import { getListAPI, GetDelDataAPI, printAPI } from '@/api/supplierLabel/outsourcPrint/outsourcPrint.js'

/**
 * 引入新增弹窗组件
 */
import addForm from './form.vue'

/**
 * 数据字段-代理
 */
const { proxy } = getCurrentInstance()
const { subcontracting_cloud_tag } = proxy.useDict('subcontracting_cloud_tag')

/**
 * 查询枚举
 */
const selectList = ref([
  // { type: '日期范围' },
  {
    label: '委外订单号',
    model: 'subcontractingOrderNum',
    type: '输入框'
  }
  // {
  //   label: '物料编码',
  //   model: 'materialCode',
  //   type: '输入框'
  // },

  // {
  //   label: '单据状态',
  //   model: 'documentStatus',
  //   type: '下拉单选',
  //   opt: subcontracting_cloud_tag
  // }
])

/**
 * 表格数据
 */
const tableData = ref([])

/**
 * 回显数据
 */
const ruleForm = ref({})

/**
 * 新增表单ref
 */
const formRef = ref(null)

/**
 * 列表枚举
 */
const column = ref([
  {
    label: '委外订单号',
    prop: 'subcontractingOrderNum'
  },
  {
    label: '商品编码',
    prop: 'materialCode'
  },
  {
    label: '商品名称',
    prop: 'materialName'
  },
  {
    label: '规格型号',
    prop: 'specType'
  },
  {
    label: '单据状态',
    prop: 'documentStatus'
  },
  {
    label: '需求量(个)',
    prop: 'quantityDemanded',
    width: '120'
  },
  {
    label: '已打印数量(个)',
    prop: 'quantityPrinted',
    width: '120'
  },
  {
    label: '供应商编码',
    prop: 'supplierCode'
  },
  {
    label: '供应商名称',
    prop: 'supplierName'
  },
  {
    label: '需求时间',
    prop: 'demandTime'
  },

  // {
  //   label: '预计到货时间',
  //   prop: 'estimatedTimeOfArrival',
  //   width: '120'
  // },

  {
    label: '开单人',
    prop: 'createBy'
  },

  {
    label: '操作',
    prop: 'x',
    width: '220'
  }
])

/**
 * 查询条件
 */
const query = reactive({
  pageNum: 1,
  pageSize: 10
})

/**
 * 状态参数
 */
const state = reactive({
  loading: false, // 列表加载状态
  btnLoading: false, // 按钮加载状态
  isShow: false, // 弹窗状态
  title: '新增', // 弹窗标题
  total: 0, // 列表总量
  ids: '' // 列表选择的id
})

/**
 * 打印弹窗
 */
const print = async id => {
  try {
    const res = await GetDelDataAPI(id)
    Object.keys(res.data).forEach(item => (ruleForm.value[item] = res.data[item]))
    state.isShow = true
    state.title = '委外打印'
  } catch (error) {}
}

/**
 * 关闭弹窗
 */
const close = () => {
  state.isShow = false
  Object.keys(ruleForm.value).forEach(item => (ruleForm.value[item] = ''))
}

/**
 * 打印确认
 */
const printFn = async () => {
  try {
    const res = await formRef.value.submit()
    if (!res) return
    await formRef.value.printFn()
    close()
    getList()
  } catch (error) {
  } finally {
  }
}

/**
 * 查询
 * @param val
 */
const selectSubmit = val => {
  for (let KEY in val) {
    query[KEY] = val[KEY]
  }
  getList()
}

/**
 * 获取列表
 */
const getList = async () => {
  try {
    state.loading = true
    const res = await getListAPI(query)
    tableData.value = res.rows
    state.total = res.total
  } catch (error) {
  } finally {
    state.loading = false
  }
}
getList()

const tableHeight = ref(0)

const maxHeight = computed(() => {
  const windowHeight = window.innerHeight
  const headerHeight = 280
  const paginationHeight = 0
  return windowHeight - headerHeight - paginationHeight
})

const handleResize = () => {
  tableHeight.value = maxHeight.value
}

onMounted(() => {
  tableHeight.value = maxHeight.value
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>
<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :SelectForm="selectList" @selectSubmit="selectSubmit" />
    <el-card class="box-card">
      <!-- 表格数据 -->
      <p-table
        keyId="id"
        :loading="state.loading"
        :data="tableData"
        :column="column"
        :height="maxHeight"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="state.total"
        @change="handleSelectionChange"
        @pagination="getList"
      >
        <template #columnCell="{ column, record }">
          <p-dictTag
            v-if="column.prop == 'documentStatus'"
            :options="subcontracting_cloud_tag"
            :value="record.documentStatus"
          />
          <div v-if="column.prop == 'x'">
            <p-operate
              :list="[
                {
                  icon: 'a',
                  emit: 'print',
                  text: '打印',
                  type: 'primary',
                  hasPermi: 'supplierLabel:outsourcPrint:print'
                }
              ]"
              @print="print(record.id)"
            />
          </div>
        </template>
      </p-table>
    </el-card>
    <p-XiaoheDialog :dialogVisible="state.isShow" :title="state.title" @close="close" width="50%">
      <template #body>
        <addForm ref="formRef" :data="ruleForm" />
        <Btn :loading="state.btnloading" @submit="printFn()" rightText="打印" @close="close" />
      </template>
    </p-XiaoheDialog>
  </div>
</template>

<style scoped lang="scss"></style>
